<template>
<view class="main flex_c">
  <nav-bar customBack @customBack="customBack" title="招募管理" />
  <!-- status 1 审核中  2审核通过 3 已驳回 -->
  <van-tabs :active="form.status" title-active-color="#000" title-inactive-color="#666" @change="tabChange">
    <van-tab title="全部" :name="''"></van-tab>
    <van-tab title="审核通过" :name="2"></van-tab>
    <van-tab title="审核中" :name="1"></van-tab>
    <van-tab title="已驳回" :name="3"></van-tab>
  </van-tabs>
  <view class="flex1" style="overflow: hidden;">
    <scroll-view
      v-if="totalHeight"
      scroll-y
      :style="{ height: `calc(100vh - ${totalHeight}px -  env(safe-area-inset-bottom) - 60rpx) ` }"
      :lower-threshold="130"
      @scrolltolower="onMore"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      >
      <view class="pl-20 pr-20 pt-20">
        <navigator :url="`/pages/center/ipElite/recruitManageDetail?id=${item.id}`" hover-class="none" class="mb-15" v-for="item in list"
          :key="item.id">
          <recruit-card :item="item">
            <template v-slot:count="{ item }">
              <view class="flex_a_c count">
                <image class="address_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/address_icon.png"></image>
                {{ item.provinceName }}<template v-if="item.cityName">·{{item.cityName}}</template>
                <template v-if="item.status === 2">
                  <image class="icon ml-16" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/see_count1_icon.png"></image>
                  <text>{{ item.deliveryNum }}</text>
                </template>
              </view>
            </template>
            <view :class="['status', item.status == 1 &&  'waiting' ,item.status == 3 && 'audit']">
              {{ item.status === 1 ? '审核中' : item.status === 2 ? '审核通过' : '已驳回'}}
            </view>
          </recruit-card>
        </navigator>
      </view>
      <van-empty v-if="total === 0" class="pt-60" image="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/empty.png"
        description="暂无精英招募" />
      <view v-if="total && total === list.length" class="all_tip">到底了</view>
    </scroll-view>
  </view>
</view>
</template>
<script setup>
import recruitCard from "@/components/ipElite/recruit-card"
import { getMyRecruitIpElite } from "@/api/center"
import { ref, reactive, toRefs, onBeforeMount, getCurrentInstance } from 'vue'
const { appContext: { config: { globalProperties: { totalHeight } } } } = getCurrentInstance();

let data = reactive({
	form: {
		status: '',
    pageSize: 40,
		pageCode: 1,
	},
	list: [],
	total: '',
  triggered: false
})
onBeforeMount(() => {
  fnGet()
})
let fnGet = async () => {
  const { code, data: { total, rows } } = await getMyRecruitIpElite(data.form)
  if (code === 200) {
    data.list = data.list.concat(rows)
    data.total = total
    data.triggered = false
  }
}
let onLoad = e => {
  if (data.total > data.list.length) {
    ++data.form.pageCode
    fnGet()
  }
}
let tabChange = e => {
  data.form.status = e.target.name || ''
  data.form.pageCode = 1
  data.list = []
  fnGet()
}
let onRefresh = () => {
  data.form.pageCode = 1
  data.list = []
  data.triggered = true
  fnGet()
}
let customBack = () => {
  uni.switchTab({
    url: '/pages/center/index'
  })
}

let { form, list, total, triggered } = toRefs(data)
</script>
<style lang="scss" scoped>
.main {
  --tabs-line-height: 88rpx;
  --tab-font-size: 28rpx;
  --tabs-bottom-bar-height: 4rpx;
  .count {
    font-size: 24rpx;
    color: #000;
    .icon {
      width: 22rpx;
      height: 22rpx;
      margin-right: 8px;
    }
    .address_icon {
      width: 17rpx;
      height: 24rpx;
      margin-right: 11rpx;
    }
  }
  .status {
    font-family: pf_bold;
    font-size: 28rpx;
    color: #00B277;
    padding-right: 22rpx;
    line-height: 45rpx;
    &.waiting {
      color: #EDA331;
    }
    &.audit {
      color: #CD0000;
    }
  }
}
</style>
